<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面试总结1</title>
</head>

<body>
    <h3>DOM查出节点</h3>
    <br>1.查找 DOM1:getElementById(),getElementsByTagName() DOM扩展:querySelector()(返回第一个匹配的元素)
    <br>2.插入 appendChild():末尾插入 insertBefore():特定位置插入
    <br>3.替换 replaceChild()
    <br>4.删除 removeChild()
    <h3>webpack性能优化</h3>
    <h4>一、优化开发体验</h4>
    <br>1、优化Loader 缩小文件搜索范围。
    <br>涉及到webpack如何处理导入文件，不再赘述，不会的可以自行搜索。
    <br>由于loader对文件转换操作很耗时，应该尽量减少loader处理的文件，可以使用include命中需要处理的文件，缩小命中范围。
    <br>2、使用DllPlugin，提升构建速度 将特定的类库提前打包然后引入
    <br>3、使用happyPack开启多线程 将Loader的同步执行转换为并行的
    <br>4、使用UglifyJs压缩代码(只支持es5)，uglifyes支持es6，两个插件不能同时开启。使用ParalellUgifyPlugin开启多个子进程压缩，既支持UglifyJs又支持uglifyes
    <br>5、使用自动刷新：监听到代码改变后，自动编译构建可运行代码并刷新页面
    <br>6、开启模块热替换:在不刷新网页的同时实现实时预览
    <br>7、优化输出质量减少首屏加载时间
    <br>8、区分环境
    <br>9、压缩代码
    <br>10、CDN加速
    <br>11、使用Tree shaking
    <h4>二、提取公共代码</h4>
    <br> 1、按需加载 每个路由页面单独打包为一个文件，不仅路由可按需加载，loadash大型类库也可
    <br> 2、提升流畅度，即代码性能:
    <br> 3、使用PrePack优化代码运行时的效率
    <br> 4、Tree Shaking 可以实现删除项目中未被引用的代码
    <br> 5、开启Scope Hoisting，让webpack打包出来的代码更小、运行更快
    <br> Scope Hoisting会分析出模块之间的依赖关系，尽可能的把打包出来的模块合并到一个函数中去。
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br> 参考链接：
    <br>https://www.jianshu.com/p/809958a504b8
    <br>https://www.cnblogs.com/wtsx-2019/p/12483313.html
</body>

</html>